<template>
	<view>
		<view class="" v-if="footmark.length > 0">

			<view class="batchDelted" @click="batchDelete">		
				<u-button class="u-button" type="error" text="全部删除" icon="trash" size="16"></u-button>
			</view>
			<view class="icontext">
				<uni-icons class="uni-icons" color="#c00000" type="shop" size="18" ></uni-icons>
				
				<text class="text">优购</text>
			</view>
			<myCart :cartList="footmark" :number_box="false" :showCheckbox="false" @deleted='deleted'
				@gotoDetail="gotoDetail" :action="action"></myCart>
		</view>

		<!-- 内容为空 -->
		<view class="" v-else>
			<myEmpty mode="history" :IfShowBut='false' :windowHeight="100"></myEmpty>
		</view>
		<!-- 提示框 -->
		<view class="" v-show="showModal">
			<myModal @cancel="cancel" @confirm="confirm" contents="确定要删除足迹吗?"></myModal>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				showModal: false,
				deletedId: void 0,
				deleteAll:false,
				action:false,
			};
		},
		computed: {
			...mapState("footmark", ["footmark"])
		},
		onLoad(){
			uni.$setNavigationBarColor()
		},
		methods: {
			...mapMutations("footmark", ["deleteFootmark","deleteFootmarkToStorage"]),
			//跳转详情
			gotoDetail(val) {
				uni.navigateTo({
					url: '/subGoodsDetail/goods_detail/goods_detail?goods_id=' + val.goods_id
				})
			},
			//批量删除
			batchDelete(){
				this.showModal = true//打开提示框
				this.deleteAll = true//全部删除
			},
			//打开提示框
			deleted(e) {
				this.deletedId = e.name
				this.showModal = true
			},
			//关闭提示框
			cancel() {
				this.showModal = false
			},
			//删除商品
			confirm() {
				//判断是否全部删除
				if(!this.deleteAll){
					this.deleteFootmark(this.deletedId)
				}else{
					this.deleteFootmarkToStorage()
				}
				this.cancel()
			},
			onPageScroll(e) {
				// //解决平滑是滚动报错
				this.action = true //添加的class类名
				clearTimeout(this.timer) //这里必须要每次滚动前 清除一次
				// 如果停留则表示滚动结束  一旦空了1s就判定为滚动结束
				this.timer = setTimeout(() => {
					this.action = false //滚动结束清除class类名
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
.icontext{
	padding-left: 20rpx;
	padding-top: 20rpx;
	padding-bottom: 10rpx;

	.text{
		font-size: 20rpx;
	}
	.uni-icons{
		vertical-align: middle;
	}
	
}
.batchDelted{
	display: flex;
	
}
</style>